import { Request, errorToast, successToast, parseTime } from '@/utils/'
import { connectStatus, allotStatus, networkType } from '@/config'
import QRCode from 'qrcode'
let request = new Request()

function createQr(deviceNo, sim, callback, portNo = '', size = 300){
	let qr = document.createElement('canvas')
	qr.height = size
	qr.width = size
	
	sim = sim.substr(-5)
	let queryString = `deviceNo=${deviceNo}`
	if(portNo){
		queryString += `&portNo=${portNo}`
	}
	queryString = encodeURIComponent(queryString)
	QRCode.toCanvas(qr, `${SITEURL}/client/?${queryString}`, function (error, res) {
		try{
				let canvas = document.createElement('canvas')
					canvas.width = size
					canvas.height = size + 30
					
					var ctx = canvas.getContext('2d')
					ctx.fillStyle='white';
					ctx.fillRect(0 ,0 , canvas.width, canvas.height)
					
					
					ctx.drawImage(qr,0,0, size, size)
					
					ctx.font="24px bold"
					ctx.fillStyle='black'
					let t = '设备号：' + deviceNo
					if(portNo){
						t += '#' + portNo
					}
					ctx.fillText(t, canvas.width / 2 - 130, canvas.height - 3)
					
					ctx.fillStyle='black';
					ctx.font="24px bold";
					ctx.fillText(sim, canvas.width / 2 - 20,canvas.height - 30)
					
					let qrUrl = canvas.toDataURL("image/png")
					callback(qrUrl)
					
		}catch(e){
			console.log(e.message)
		}
		
	})
	
}

export default {
	data() {
		return {
			portStatus : ['空闲', '占用', '维护'],
			connectStatusList : connectStatus,
			allotStatusStatusList : allotStatus,
			networkTypeList : networkType,
			deviceNo : '',
			device : null
		}
	},
	
	methods : {
		
		downAllPort : function(){
			let fileName = this.deviceNo
			let base64List = [this.device.qrUrl]
			this.device.port.forEach(v => {
				base64List.push(v.qr)
			})
			var zip = new JSZip()
			var img = zip.folder(fileName)
			base64List.forEach((v, i) => {
				let name = i === 0 ? this.deviceNo : i 
				img.file(name + '.png', v.substring(22), {base64: true})
			})
			
			zip.generateAsync({type:"blob"}).then(function(content) {
					saveAs(content, fileName + ".zip");
			});
		}
	},
	
	created() {
		this.deviceId = this.$route.params.deviceId
		request.get('device/getDetail', res => {
			if(res.success) {
				let device = res.data
				this.deviceNo = device.device_no
				this.device = device
				createQr(device.device_no, device.sim_iccid, qr => {
					console.log(this)
					this.device.qrUrl = qr
				})
				
				this.device.port.forEach((v, i) => {
					createQr(device.device_no, device.sim_iccid, qr => {
						this.device.port[i].qr = qr
					}, v.port_no)
				})
				
			}else{
				errorToast(res.msg, this)
			}
		}, {deviceId : this.deviceId})
		
		
		
	},
	
	mounted () {
		let script = document.createElement('script')
		script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js'
		let script1 = document.createElement('script')
		script1.src = 'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js'
		document.body.appendChild(script)
		document.body.appendChild(script1)
		//echart = echarts.init(this.$refs.heartEchart)
		//console.log(echart)
		
	}
}